<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加班统计</title>
</head>
<body>
<style type="text/css">
	.kq-index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
    	margin: 0 auto;
    	
	}
	.kq-index-body2{
		width: 100%;
	    height: 100%;
		background-color: #fff;
	}
	.kq-index-body3{
		min-width: 950px;
	   padding: 20px;
	    position: relative;
	}
	.kq-title-left{
		display: inline-block;
	    float: left;
	    height:50px;
	    line-height:50px;
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.kq-title-left span{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.kq-title-right{
		float: right;
		height: 50px;
	}
	.kq-title-right div{
		float: left;
		margin-right: 20px;
		margin-top: 15px;
	}
	.kq-title-right div button{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
    	padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	position: relative;
    	float: left;
    	border: 1px solid #0000003b;
    	cursor: pointer;
	}
	#kq-table1{
		width: 100%;
	    float: left;
	    overflow-x: auto;
	    margin-top: 5px;
	    border-collapse: collapse;
	    border: 1px solid #e4e7ec;
	    background-color: #fff;
	    
   		color: gray;
   		font-size:12px; 
	}
	#kq-table1 thead{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	} 
	#kq-table1 th{
		background: #6666661a;
	}
	#kq-table1 td{
		border: 1px solid #e4e7ec;
		width: 150px;
		height: 50px;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}
	#click,.kq-btn3{
		background-color: #19AA8D!important;
    	color: #fff!important;
    	border-color: #13826b33!important;
    	border: 1px solid transparent;
	}
	.kq-btn3{
		margin-right: 10px;
    	border-radius: 4px;
    	cursor: pointer;
	}
	
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.kq-btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.kq-btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    font-size: 21px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 0;
		margin-bottom: 10px;
		height:30px;
    	line-height: 1.42857143;
	}
	.form-group-text1,.form-group-text2,.form-group-text3,.form-group-text4{
		padding-right: 5px;
    	padding-left: 0;
    	float: left;
    	
    	text-align: center;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
	}
	.form-group-text1{
		width: 33%;
	}
	.form-group-text2{
    	width: 50%;
	}
	.form-group-text3{
		width: 25%;
		text-align: right;
	}
	.form-group-text4{
    	width: 75%;
	}
	.form-group-text2 input{
		width: 55px;
	    display: inline-block;
	    height: 22px;
    	padding: 0 4px;
    	border: 1px solid #eee;
		border-left: none!important;
	    border-right: none!important;
	    border-top: none!important;
	    border-radius: 0!important;
	    text-align: center;
	    background-color: transparent;
	}
	.form-group-text4 textarea {
		resize: none;
    	margin-top: 7px;	
    	font-family: inherit;
	    font-size: inherit;
	    line-height: inherit
	}
</style>

<script type="text/javascript">
$(function(){
	//初始化表格
	$('#kq-table1').datagrid({
		url:'ostatis_selectAll',
		singleSelect:true,
		
		columns:[[
   	 		{field:'staff_id',hidden:true},
   	 		{field:'sortable',title:'#',width:28,align:'center'},
			{field:'Staff_name',title:'姓名',width:80,align:'center'},
			{field:'depart_name',title:'部门',width:80,align:'center'},
			{field:'one',title:'工作日加班（/h）',width:200,align:'center'},
			{field:'two',title:'休息日加班（/天）',width:200,align:'center'},
			{field:'three',title:'节假日加班（/天）',width:200,align:'center'}
   	 	]],
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
	$(".close").click(function(){
		guanbi();
	});
	$(".kq-btn-close").click(function(){
		guanbi();
	});
	$(".kq-btn-yes").click(function(){
		guanbi();
	});
	$("#body-kq-btn-xiu").click(function(){
		kaiqi();
	});
});
function xiu(id){
	
}
function xiangxiu(id){
	
}
function xiang(id){
	
}
function guanbi(){
	$(".modal").hide();
	$(".modal-backdrop").hide();
}
function kaiqi(){
	$(".modal").show();
	$(".modal-backdrop").show();
}
</script>
<div class="kq-index-body1">
	<div class="kq-index-body2">
			<div class="kq-index-body3">
				<div class="title">
					<div class="kq-title-left"> 
						<span>计算年份</span>
						<select>
							<option>2018</option>
						</select>
					</div>
					<div class="kq-title-right"> 
						<div><button class="kq-title-right-kq-btn1" id="click">全部</button><button class="kq-title-right-kq-btn2">在职</button><button class="kq-title-right-kq-btn3">离职</button></div>
					</div>
				<div class="body-kq-table">
					<table id="kq-table1" class="easyui-datagrid" data-options="width:1023,fitColumns:true,height:300">
					    <thead>
							<tr>
								<th data-options="field:'one',width:50">#</th>
								<th data-options="field:'tow',width:100">姓名</th>
								<th data-options="field:'three',width:100">部门</th>
								<th data-options="field:'four',width:200">工作日加班（小时）</th>
								<th data-options="field:'five',width:200">休息日加班（小时）</th>
								<th data-options="field:'six',width:200">节假日加班（小时）</th>
								<th data-options="field:'sever',width:250">操作</th>
							</tr>
					    </thead>
					    <tbody>
					    		<td >1</td>
								<td >周俊</td>
								<td>人事部</td>
								<td>20</td>
								<td>20</td>
								<td >30</td>
								<td><button class="kq-btn3" id="body-kq-btn-xiu">修改</button><button class="kq-btn3">修改记录</button></td>
					    </tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close">×</button>
				<h3>编辑</h3>
			</div>
			<div class="modal-body">
				<form action="">
					<div class="modal-form-group">
						<div class="form-group-text1">
							<span>姓名：</span>周俊
						</div>
						<div class="form-group-text1">
							<span>部门：</span>人事部
						</div>
						<div class="form-group-text1">
							<span>电话：</span>15107331832
						</div>
					</div >
					<div class="modal-form-group">
						<div class="form-group-text2">
							<span>工作日加班：</span><input type="text" value="20" disabled="disabled">&nbsp小时
						</div>
						<div class="form-group-text2">
							<span>休息日加班：</span><input type="text" value="20" disabled="disabled">&nbsp小时
						</div>
					</div>
					<div class="modal-form-group">
						<div class="form-group-text2">
							<span>节假日加班：</span><input type="text" value="30" disabled="disabled">&nbsp小时
						</div>
					</div>
					<div class="modal-form-group">
						<div class="form-group-text3">
							<span>修改原因：</span>
						</div>
						<div class="form-group-text4">
							<textarea rows="5" cols="60">
							</textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="kq-btn-close">关闭</button>
				<button class="kq-btn-yes">确定</button>
			</div>
		</div>
	</div>
</div>
<div class="modal-backdrop"></div>
</body>
</html>